import React, { useEffect, useState } from 'react'
import { useObserver } from 'mobx-react-lite' 
import useStore from '../../context/useStore'
import { useLocation, useHistory } from 'react-router-dom'
import './ModifyName.scss'
import './Myprofile.scss'
import { IUserInfo,IMobileInfo} from '../../utils/interface';
const ModifyName: React.FC = (() => {
  let [name,setName]=useState<string>('')
  let history = useHistory()
  let location = useLocation()
  let { my }=useStore()
  function back() {
    history.goBack()
  }
  useEffect(() => {
    setName((location.state as IUserInfo).nickname)
  })
  return useObserver(() =>
  <div className="modifyname">
  <div className="head">
    <span onClick={back}>{'<'}</span>
    <h3>修改昵称</h3>
</div>
<div className="body">
        <div className="iptBox">
          <input type="text" className="ipt" value={name} onChange={e=>setName(e.target.value)}/>
        </div>
        <div className="okBox">
          <span className="okBtn">确定</span>
        </div>
</div>
</div>
  )
})  
export default ModifyName